<template>
  <div class="back-stage">
    <el-container style="height: 500px; border: 1px solid #eee">
      <el-header style="text-align: right; font-size: 12px">
        <img src="" alt="" />
        <ul>
          <li class="active">
            <i class="el-icon-user-solid"></i><span>用户</span>
          </li>
          <li><i class="el-icon-user-solid"></i><span>教学</span></li>
          <li><i class="el-icon-user-solid"></i><span>题库</span></li>
          <li><i class="el-icon-user-solid"></i><span>运营</span></li>
          <li><i class="el-icon-user-solid"></i><span>营销</span></li>
          <li><i class="el-icon-user-solid"></i><span>商品</span></li>
          <li><i class="el-icon-user-solid"></i><span>财务</span></li>
          <li><i class="el-icon-user-solid"></i><span>统计</span></li>
          <li><i class="el-icon-user-solid"></i><span>系统</span></li>
        </ul>
        <span>王小虎</span>
        <el-dropdown>
          <el-dropdown-menu>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>

      <el-container>
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <el-menu :default-openeds="['1', '3']">
            <el-submenu index="1">
              <template slot="title">学员管理</template>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">讲师管理</template>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">助教管理</template>
            </el-submenu>
          </el-menu>
        </el-aside>

        <el-main>
          <el-row :gutter="20">
            <el-col class="fff" :span="1.4"
              ><div class="grid-content bg-purple fff">
                <span>学院状态</span>
              </div></el-col>
            <el-col class="fff" :span="4"
              ><div class="grid-content bg-purple fff">
                <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select></div
            ></el-col>
            <el-col class="fff" :span="1.4"
              ><div class="grid-content bg-purple fff">
                <span>学生名称</span>
              </div></el-col
            >
            <el-col class="fff" :span="4"
              ><div class="grid-content bg-purple fff">
                <el-input
                  placeholder="请输入内容"
                  v-model="input"
                ></el-input></div
            ></el-col>
            <el-col class="fff" :span="1.4"
              ><div class="grid-content bg-purple fff">
                <span>手机号</span>
              </div></el-col
            >
            <el-col class="fff" :span="4"
              ><div class="grid-content bg-purple fff">
                <el-input placeholder="请输入内容" v-model="ip"></el-input></div
            ></el-col>
            <el-col :span="2"
              ><div class="grid-content bg-purple bfff" @click="seach">
                <i class="el-icon-user-solid"></i><span>搜索</span>
              </div></el-col
            >
            <el-col :span="2"
              ><div class="grid-content bg-purple bfff" @click="cz">
                <i class="el-icon-user-solid"></i><span>重置</span>
              </div></el-col
            >
          </el-row>

          <el-row :gutter="20">
            <el-col :span="2">
              <div class="grid-content bg-purple blue">新增学院</div></el-col
            >
            <el-col :span="2">
              <div class="grid-content bg-purple blue">批量导入</div></el-col
            >
            <el-col :span="2">
              <div class="grid-content bg-purple blue">批量导出</div></el-col>
            <el-col :span="2">
              <div class="grid-content bg-purple blue">查看报表</div></el-col
            >
          </el-row>

          <el-table :data="tableData">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column
              prop="nickname"
              label="学生名称"
              width="200"
              class="student"
            >
              <template slot-scope="scope">
                <img :src="scope.row.avatar" alt="" class="i1" />
                <span>{{ scope.row.nickname }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="mobile" label="手机号" width="200">
            </el-table-column>
            <el-table-column prop="status" label="状态" width="200">
            </el-table-column>
            <el-table-column prop="created_at" label="创建" width="200">
            </el-table-column>
            <el-table-column prop="address" label="操作">
              <span>详情-编辑-禁用-删除-重置密码</span>
            </el-table-column>
          </el-table>
        </el-main>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="100"
          >
          </el-pagination>
        </div>
      </el-container>
    </el-container>
  </div>
</template>
<script>
var a = Object.prototype.toString;
console.log(a.call("aaaa"));
console.log(a.call(1));
console.log(a.call([]));
console.log(typeof {});
import { getCityAll } from "@/api/index";
export default {
  data() {
    return {
      tableData: [],
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          const { level } = node;
          setTimeout(() => {
            const nodes = Array.from({ length: level + 1 }).map((item) => ({
              //   value: ++id,
              //   label: `选项${id}`,
              leaf: level >= 2,
            }));
            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            resolve(nodes);
          }, 1000);
        },
      },
      h: "",
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      options: [
        {
          value: "1",
          label: "启用",
        },
        {
          value: "2",
          label: "禁用",
        },
      ],
      value: "",
      input: "",
      ip: "",
      val: 1,
      k: "",
    };
  },
  methods: {
    getLocalTime(nS) {
      return new Date(parseInt(nS) * 1000)
        .toLocaleString()
        .replace(/:\d{1,2}$/, " ");
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    async handleCurrentChange(val) {
      this.val = val;
      var h = await getCityAll(this.val);
      this.tableData = h.data.data.list;
      this.tableData.forEach((res) => {
        if (res.status == 1) {
          res.status = "启用";
        }
        this.h = this.getLocalTime(res.created_at);
        res.created_at = this.h;
      });
    },
    async seach() {
      this.k = this.value;
      var h = await getCityAll("", this.k, this.input, this.ip);
      this.tableData = h.data.data.list;
      this.tableData.forEach((res) => {
        if (res.status == 1) {
          res.status = "启用";
        }
        this.h = this.getLocalTime(res.created_at);
        res.created_at = this.h;
      });
    },
    async cz() {
      var h = await getCityAll(1, "", "", "");
      this.input = "";
      this.value = "";
      this.ip = "";
      this.tableData = h.data.data.list;
      this.tableData.forEach((res) => {
        if (res.status == 1) {
          res.status = "启用";
        }
        this.h = this.getLocalTime(res.created_at);
        res.created_at = this.h;
      });
    },
  },
  async mounted() {
    var h = await getCityAll();
    this.tableData = h.data.data.list;
    this.tableData.forEach((res) => {
      if (res.status == 1) {
        res.status = "启用";
      } else {
        res.status = "禁用";
      }
      this.h = this.getLocalTime(res.created_at);
      res.created_at = this.h;
    });
  },
  computed: {},
};
</script>
<style scoped>
.back-stage {
  max-width: 1920px;
  margin: auto;
  position: relative;
}
.blue {
  background: rgb(0, 144, 240) !important;
  color: #fff;
}

.bfff {
  background: #fff !important;
  border: 1px solid #e6e6e6 !important;
}

.fff {
  background: #fff !important;
}
.el-table {
  border: 1px solid #e6e6e6 !important;
}

.el-table-column {
  border: 1px solid #e6e6e6 !important;
}

.active {
  color: #fff;
  border-bottom: 4px solid rgb(0, 228, 186);
}

.el-header {
  width: 100%;
  background: linear-gradient(to right, rgb(2, 70, 172), rgb(0, 119, 255));
  color: rgb(187, 187, 187);
  line-height: 60px;
  z-index: 100;
}

.el-aside li {
  border: 0 solid #000 !important;
}

.el-aside {
  color: #333;
  margin-top: 10px;
  width: 140px !important;
  background: #fff !important;
  border-right: solid 1px #e6e6e6;
}

.el-header ul {
  float: left;
  height: 100%;
}

.el-header li {
  float: left;
  margin-left: 80px;
  height: 100%;
  box-sizing: border-box !important;
}

.el-header img {
  float: left;
  width: 80px;
  height: 40px;
  border: 1px solid #000;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 20px;
}

.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.el-col div {
  text-align: center;
  line-height: 40px;
  font-size: 12px;
}
.block {
  position: absolute;
  bottom: -260px;
  right: 400px;
}
.student {
  position: relative;
}
.im {
  width: 20px;
  height: 20px;
  border: 1px solid #000;
  position: absolute;
  left: -50px;
  z-index: 100;
}
.i1 {
  width: 20px;
  height: 20px;
}
</style>